<!DOCTYPE html>
<html lang="zh">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
 </head>
 <style type="text/css">
  * {
   margin: 0;
   padding: 0;
  }

  html,
  body {
   width: 100%;
   height: 100%;
  }

  #div1 {
   width: 50px;
   height: 50px;
   background: cyan;
   position: absolute;
  }
 </style>
 <body>
  <div id="div1"></div>
 </body>
 <script type="text/javascript">
  var div1 = document.querySelector('#div1');
  //限制最大宽高，不让滑块出去
  var maxW = document.body.clientWidth - div1.offsetWidth;
  var maxH = document.body.clientHeight - div1.offsetHeight;
  //手指触摸开始，记录div的初始位置
  div1.addEventListener('touchstart', function(e) {
   var ev = e || window.event;
   var touch = ev.targetTouches[0];
   oL = touch.clientX - div1.offsetLeft;
   oT = touch.clientY - div1.offsetTop;
   document.addEventListener("touchmove", defaultEvent, false);
  });
  //触摸中的，位置记录
  div1.addEventListener('touchmove', function(e) {
   var ev = e || window.event;
   var touch = ev.targetTouches[0];
   var oLeft = touch.clientX - oL;
   var oTop = touch.clientY - oT;
   if (oLeft < 0) {
    oLeft = 0;
   } else if (oLeft >= maxW) {
    oLeft = maxW;
   }
   if (oTop < 0) {
    oTop = 0;
   } else if (oTop >= maxH) {
    oTop = maxH;
   }
   div1.style.left = oLeft + 'px';
   div1.style.top = oTop + 'px';
  });
  //触摸结束时的处理
  div1.addEventListener('touchend', function() {
   document.removeEventListener("touchmove", defaultEvent);
  });
  //阻止默认事件
  function defaultEvent(e) {
   e.preventDefault();
  }
 </script>
</html>